<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            11
        </li>
        <li class="active">22
            <span>我是span</span>
        </li>
        <li>333</li>
    </ul>
    <!-- <button>点击我删除元素</button> -->
    <button>点击我替换元素</button>
    
    <script>
        // dom的操作 ： 增：一、新建一个元素 二、把新建的元素添加到指定位置。 查 
        // 一、删除dom元素 
        // 1. 自身元素.remove();
        // var  lis = document.querySelectorAll("li");
        // lis.forEach(function(item){
        //     item.onclick = function(){
        //         this.remove();  // 删除自身元素 
        //     }
        // })

        // 2.父级元素.removeChild(子元素);
        // var btn = document.querySelector("button");
        // var ulEle = document.querySelector("ul");
        // var activeEle = document.querySelector(".active");
        // btn.onclick = function(){
        //     ulEle.removeChild(activeEle);
        // }

        // 二、替换元素 
        // 父级元素.reaplceChild(newElement,oldElement);
        // var ulEle = document.querySelector("ul");
        // var activeEle = document.querySelector(".active");  // oldElement
        // var btn = document.querySelector("button");
        // var newElement = document.createElement("li");
        // newElement.innerHTML = "我是新的li元素";
        // btn.onclick = function(){
        //     ulEle.replaceChild(newElement,activeEle);
        // }

        // 三、克隆元素 ： 元素.cloneNode();
        // cloneNode() : 可以传参 ，默认是false,不会克隆子元素 。如果是true 那么会克隆子元素
        var  ulEle = document.querySelector("ul");
        var activeEle = document.querySelector(".active");
        var cloneEle = activeEle.cloneNode(true);  // 把active元素 克隆一份新的出来
        var btn = document.querySelector("button");
        btn.onclick = function(){
            ulEle.appendChild(cloneEle);
        }




    </script>
</body>
</html>